<template>
	<view class="">
		<text>{{name}}</text>
		<scroll-view scroll-x="true" scroll-y="true" ref="scroll">
			<view></view>
		</scroll-view>
		<navigator url="/pages/demo5/demo5">Demo5</navigator>
		<view class="">----</view>
		<view>计数：{{count}}</view>
		<view class="">----</view>
		<view>console.log 分别打印了onBeforeMount, onMounted,onLoad,onReady,onShow,onHide 加载顺序</view>
		<view>--------------</view>
		<view>常用：uniapp 的四个页面生命周期 onLoad,onReady,onShow,onHide</view>
		<view>--------------</view>
		<view v-for="(item,index) in 70" :key="index">
			{{index}}
		</view>
		<view class="fixed" v-if="fixed">
			向上
		</view>
	</view>
</template>

<script setup>
import { onBeforeMount, onMounted, ref } from 'vue';
import { onLoad,onReady,onShow,onHide,onUnload,onPageScroll } from '@dcloudio/uni-app'
const name = ref('小明');
const scroll = ref(null);
const count = ref(0)
const fixed = ref(false)

let time = setInterval(()=>{
	count.value++
},1000)

onLoad((e)=>{
	name.value = 'URL传参过来的值字符串和数字：'+e.name+e.age
	// console.log('onLoad函数'+e.name);
	console.log('onLoad函数');
	
})

onShow(()=>{
	console.log('onShow函数');
})

onHide(()=>{
	console.log('onHide函数');
	clearInterval(time);
})

onReady(()=>{
	console.log('onReady函数');
	// console.log(scroll.value);
})

onMounted(()=>{
	console.log('onMounted函数');
})

onBeforeMount(()=>{
	console.log('onBeforeMount函数');
})

onUnload(()=>{
	console.log('onUnload函数');
})

onPageScroll((e)=>{
	console.log(e.scrollTop)
	// if (e.scrollTop >= 400) {
	// 	fixed.value = true;
	// }else{
	// 	fixed.value = false
	// }
	
	fixed.value = e.scrollTop >= 400;
})

/* 在 UniApp 开发框架中，页面的四个主要生命周期钩子函数分别是 `onLoad`、`onReady`、`onShow` 和 `onHide`，它们的作用及执行顺序如下：

1. **onLoad**
   - **作用**：页面加载时触发。当一个页面被初始化并开始加载时，`onLoad` 会被调用。在这个钩子函数中，开发者通常用来接收页面打开时传递的参数（例如通过 `navigator` 组件跳转时附带的参数），并发起接口请求获取页面所需的初始数据。

2. **onReady**
   - **作用**：页面初次渲染完成时触发。这意味着页面的所有视图层已经构建完成，并且页面DOM树已经准备好，但是页面有可能还未显示出来，特别是在有页面切换动画的情况下，可能会在动画完成之前就触发 `onReady`。在这个阶段，可以对页面进行进一步的操作，例如绑定原生组件事件，计算页面布局等。

3. **onShow**
   - **作用**：页面显示在用户面前时触发。不仅在页面首次加载时，而且每当页面从后台重新回到前台（比如从其他页面跳转回来、从系统后台切换回来等）时，都会触发 `onShow`。这个钩子适合用来刷新页面数据、检查登录状态、更新页面状态等与页面可见性相关的操作。

4. **onHide**
   - **作用**：页面从前台变为后台或被隐藏时触发，例如用户离开当前页面跳转到其他页面或者关闭应用到后台时。在这个生命周期函数中，开发者可以进行资源释放、清除定时器、保存页面状态等工作。

**执行顺序**：
```markdown
onLoad -> onReady -> (页面显示) -> onShow
         |                    |
         V                    |
(页面隐藏) -> onHide       |
```

简而言之，页面生命周期的执行流程是先加载初始化（`onLoad`），接着渲染完成（`onReady`），然后是页面显示给用户（`onShow`），最后是页面隐藏或离开（`onHide`）。 */
</script>

<style lang="scss" scoped>
.fixed{
	width: 100px;
	height: 100px;
	background: orange;
	position: fixed;
	right: 30px;
	bottom: 30px;
}
</style>
